<template>
    <div class="main-box">
        <div class="main">
            <div class="userinfo-box">
                <div class="userinfo username">
                    <p class="title">当前用户</p>
                    <span>{{ userInfo.username }}</span>
                </div>
                <div class="userinfo currentTime">
                    <p class="title">当前时间</p>
                    <span>{{ userInfo.currentTime }}</span>
                </div>
                <div class="userinfo userType">
                    <p class="title">用户类型</p>
                    <span>{{ userInfo.userType }}</span>
                </div>
            </div>
            <div class="bottom">
                <div class="headSculpture">
                    <el-carousel indicator-position="outside">
                        <el-carousel-item v-for="(item,index) in work.img" :key="index">
                            <img :src="item" alt="" class="headSculpture-img">
                        </el-carousel-item>
                    </el-carousel>
                </div>
                <div class="work-box">
                    <div class="work">
                        <span>运行总产量</span>
                        <span>{{ work.totalOutput }}个</span>
                    </div>
                    <div class="work">
                        <span>正品个数</span>
                        <span>{{ work.qualified }}个</span>
                    </div>
                    <div class="work">
                        <span>废品个数</span>
                        <span>{{ work.waste }}个</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {format,verificationCode,debounce} from '@/utils/PublicMethods.js'

    export default {
        data(){
            return {
                userInfo: {
                    username: 'user3@ww',
                    currentTime: format('YYYY/MM/DD hh:mm:ss'),
                    userType: '维修工',
                },
                work: {
                    totalOutput:7,
                    qualified:3,
                    waste: 10,
                    img:[
                        require('@/assets/images/projectImg/jxw.png'),
                        require('@/assets/images/projectImg/技.png'),
                        require('@/assets/images/projectImg/jxw.png'),
                    ],
                }
            }
        }
    }
</script>

<style lang="less" scoped>
.main-box{
    width: 100%;
    height: 100%;
    background-color: white;
    padding: 10px;
    box-sizing: border-box;
    .main{
        height: 100%;
        border-radius: 5px;
        .userinfo-box{
            padding: 20px 0;
            border-radius: 5px;
            background-color: #f5f5f5;
            .userinfo{
                background-color: white;
                border-radius: 6px;
                margin: 10px 0;
                border: 1px solid #d5d5d5;
                padding: 10px;
                span{
                    font-size: 1.4rem;
                    padding: 5px 0;
                }
            }
            .username{

            }
            .currentTime{

            }
            .userType{

            }
        }
        .bottom{
            display: flex;
            margin-top: 3px;
            
            .headSculpture{
                background-color: #f5f5f5;
                flex: 1;
                margin-right:3px;
                border: 1px solid #d5d5d5;
                text-align: center;
                padding: 7px 0;
                .headSculpture-img{
                    width: 400px;
                }
            }
            .work-box{
                flex: 1;
                background-color: #f5f5f5;
                border: 1px solid #d5d5d5;
                display: flex;
                padding: 7px 0; 
                justify-content: space-around;
                .work{
                    width:16%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    border-radius: 10px;
                    border:1px solid #797979;
                    background-color: white;
                    padding: 10px 0 ;
                    span:nth-child(1){
                        font-size: 0.8rem;
                        color: #797979;

                    }   
                    span:nth-child(2){
                        flex: 1;
                        font-size: 1.5rem;
                        display: flex;
                        justify-content: center; //水平
                        align-items: center; //垂直
                    }
                }
                
            }
        }
    }
}
</style>